<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h4>{{msg}}</h4>
        <h5 v-on:click="changeA">a==={{a}}</h5>
        <h6>b==={{b}}</h6>
        <h4>word--{{word}}</h4>
        <h5>c==={{c}}</h5>
        <button v-on:click="teardown">点击销毁</button>
    </div>
</body>
<script>
    // console.log(Vue);
    var data = {
        a: 1,
        b: 200,
        msg: "Vue 实例对象 vm",
        word: "wh2105-daydayup",
        c: "",
    }
    var count = 0
    // Object.freeze(data); /* 对象冻结  意味对象的中的数据不再做修改变化*/
    const vm = new Vue({
        data: data,
        methods: {
            log(msg) {

                console.log(`##${++count} --- ${msg}`);

            },
            changeA() {
                this.a += 1;
            },
            teardown() {
                vm.$destroy()
            }
        },
        beforeCreate() {
            console.log(`##${++count} --- beforeCreate - 实例创建之前`);
        },
        created() {
            this.log("created - 实例被创建完毕")
        },
        beforeMount() {
            this.log("beforeMount - 实例被载入页面之前")
        },
        mounted() {
            this.log("mounted - 实例被载入页面中完成")
        },
        beforeUpdate() {
            this.log("beforeUpdate - 实例的数据更新之前")
        },
        updated() {
            this.log("updated - 实例数据更新完毕")
        },
        beforeDestroy() {
            this.log("beforeDestroy - 实例被销毁之前")
        },
        destroyed() {
            this.log("desstroyed - 实例销毁了")
        },
        computed: {

        },
        watch: {

        },
        components: {

        }
    }).$mount("#app")  /* 挂载到app */

    data.c = 2000;
</script>

</html>